<template>
  <view class="container">
    <view v-for="(item, index) in purchaseinorderResult.virtualList" :key="index">
      <view class="info-card horizontal">
        <view class="item-field price-field">
          <text class="label">产品名称:</text>
          <text class="value">{{ item.productName }}</text>
        </view>
        <view class="item-field price-field">
          <text class="label">产品规格:</text>
          <text class="value">{{ item.productStandards }}</text>
        </view>
        <view class="item-field price-field">
          <text class="label">数量:</text>
          <text class="value">{{ item.count }}</text>
        </view>
      </view>
    </view>
    <view class="button-container">
      <button @click="startScan">扫码</button>
      <button @click="handleConfirm">确定</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import * as suppliersendorder from '@/api/suppliersendorder/inde.js';
import * as SecStockrApi from '@/api/secStock/index.js';

export default {
  data() {
    return {
      listdata: [],
      purchaseinorderResult: { name:'',virtualList: [] } // 初始化 virtualList
    };
  },
  onLoad() {
    // 初始化或其他逻辑
  },
  methods: {
    // 扫码
    startScan() {
      uni.scanCode({
        success: (res) => {
          this.handleScanResult(res.result);
        },
        fail: (err) => {
          console.error('扫描失败:', err);
        }
      });
    },
    handleScanResult(scanData) {
      const params = { inboundBatch: scanData };
      SecStockrApi.getSecStockPage(params)
        .then(res => {
          if (res.data.list[0].productCategoryName == "高值耗材") {
            if (res.data.list[0].count == 0) {
              uni.showToast({ title: '该高职商品已打包', icon: 'none', duration: 5000 });
            } else {
              let exists = this.purchaseinorderResult.virtualList.some(item => item.inboundBatch === res.data.list[0].inboundBatch);
              if (exists) {
                uni.showToast({ title: '该高职已经扫描过', icon: 'none', duration: 5000 });
              } else {
                this.purchaseinorderResult.virtualList.push(res.data.list[0]);
                uni.showToast({ title: '扫描成功', icon: 'none', duration: 5000 });
                // console.log('现在的所有信息', this.purchaseinorderResult);
              }
            }
          } else {
            uni.showToast({ title: '请扫描高职二维码', icon: 'none', duration: 5000 });
          }
        })
        .catch(error => {
          uni.showToast({ title: '请扫描正确的码信息', icon: 'none', duration: 5000 });
        });
    },
	handleConfirm(){
		// 确定按钮
		      uni.showModal({
		        title: '请输入名称',
		        content: '',
		        editable: true, // 是否显示输入框
		        placeholderText: '请输入', // 输入框提示内容
		        confirmText: '确定',
		        cancelText: '取消',
		        success: (res) => {
		          if (res.confirm) {
		            // 用户点击确定后，处理输入的内容
		            console.log('用户输入的内容：', res.content);
		            // 在这里可以将res.content的值赋值给页面上的某个变量，或者进行其他逻辑处理
					this.purchaseinorderResult.name = res.content
					console.log('现在的所有信息', this.purchaseinorderResult);
					const a = SecStockrApi.virtualUpdate(this.purchaseinorderResult)
					uni.navigateBack({delta: 1});
					
		          } else if (res.cancel) {
		            // 用户点击取消
		            console.log('用户取消了输入');
		          }
		        }
		      });
		    
		  

		
		
	}
  },
};
</script>

<style>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  padding-bottom: 70px; /* 确保内容不会被按钮遮挡 */
}

.info-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-card.horizontal {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.item-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.label {
  font-size: 15px;
  color: #333333;
  margin-bottom: 5px;
}

.value {
  font-size: 13px;
  color: #007aff;
}

.button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 10px 0;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
}
</style>
